// DOM元素
const musicContainer = document.getElementById('music-container');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const title = document.getElementById('title');
const cover = document.getElementById('cover');

// 歌曲列表
const songs = ['summer', 'ukulele', 'hey'];

// 当前歌曲索引
let songIndex = 2;

// 初始化加载歌曲
loadSong(songs[songIndex]);

// 加载歌曲
function loadSong(song) {
    title.innerText = song;
    audio.src = `music/${song}.mp3`;
    cover.src = `images/${song}.jpg`;
}

// 播放歌曲
function playSong() {
    musicContainer.classList.add('play');
    playBtn.querySelector('i.fas').classList.remove('fa-play');
    playBtn.querySelector('i.fas').classList.add('fa-pause');
    audio.play();
}

// 暂停歌曲
function pauseSong() {
    musicContainer.classList.remove('play');
    playBtn.querySelector('i.fas').classList.add('fa-play');
    playBtn.querySelector('i.fas').classList.remove('fa-pause');
    audio.pause();
}

// 上一首
function prevSong() {
    songIndex--;
    if (songIndex < 0) {
        songIndex = songs.length - 1;
    }
    loadSong(songs[songIndex]);
    playSong();
}

// 下一首
function nextSong() {
    songIndex++;
    if (songIndex > songs.length - 1) {
        songIndex = 0;
    }
    loadSong(songs[songIndex]);
    playSong();
}

// 更新进度条
function updateProgress(e) {
    const { duration, currentTime } = e.srcElement;
    const progressPercent = (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;
}

// 设置进度条
function setProgress(e) {
    const width = this.clientWidth;
    const clickX = e.offsetX;
    const duration = audio.duration;
    audio.currentTime = (clickX / width) * duration;
}


// 您提供的JavaScript代码
        // DOM元素
     
        // 歌曲列表 - 使用在线示例音乐
        const songs = [
            { 
                name: 'SoundHelix Song 1', 
                audioSrc: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
                coverSrc: 'https://picsum.photos/200?random=1'
            },
            { 
                name: 'SoundHelix Song 2', 
                audioSrc: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
                coverSrc: 'https://picsum.photos/200?random=2'
            },
            { 
                name: 'SoundHelix Song 3', 
                audioSrc: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
                coverSrc: 'https://picsum.photos/200?random=3'
            }
        ];

        // 当前歌曲索引
        let songIndex = 0;

        // 初始化加载歌曲
        loadSong(songs[songIndex]);

        // 加载歌曲
        function loadSong(song) {
            title.innerText = song.name;
            audio.src = song.audioSrc;
            cover.src = song.coverSrc;
        }

        // 播放歌曲
        function playSong() {
            musicContainer.classList.add('play');
            playBtn.querySelector('i.fas').classList.remove('fa-play');
            playBtn.querySelector('i.fas').classList.add('fa-pause');
            audio.play();
        }

        // 暂停歌曲
        function pauseSong() {
            musicContainer.classList.remove('play');
            playBtn.querySelector('i.fas').classList.add('fa-play');
            playBtn.querySelector('i.fas').classList.remove('fa-pause');
            audio.pause();
        }

        // 上一首
        function prevSong() {
            songIndex--;
            if (songIndex < 0) {
                songIndex = songs.length - 1;
            }
            loadSong(songs[songIndex]);
            playSong();
        }

        // 下一首
        function nextSong() {
            songIndex++;
            if (songIndex > songs.length - 1) {
                songIndex = 0;
            }
            loadSong(songs[songIndex]);
            playSong();
        }

        // 更新进度条
        function updateProgress(e) {
            const { duration, currentTime } = e.srcElement;
            const progressPercent = (currentTime / duration) * 100;
            progress.style.width = `${progressPercent}%`;
        }

        // 设置进度条
        function setProgress(e) {
            const width = this.clientWidth;
            const clickX = e.offsetX;
            const duration = audio.duration;
            audio.currentTime = (clickX / width) * duration;
        }

        // 事件监听
        playBtn.addEventListener('click', () => {
            const isPlaying = musicContainer.classList.contains('play');
            if (isPlaying) {
                pauseSong();
            } else {
                playSong();
            }
        });

        // 切换歌曲
        prevBtn.addEventListener('click', prevSong);
        nextBtn.addEventListener('click', nextSong);

        // 进度条更新
        audio.addEventListener('timeupdate', updateProgress);

        // 点击进度条
        progressContainer.addEventListener('click', setProgress);

        // 歌曲结束自动下一首
        audio.addEventListener('ended', nextSong);

// 事件监听
playBtn.addEventListener('click', () => {
    const isPlaying = musicContainer.classList.contains('play');
    if (isPlaying) {
        pauseSong();
    } else {
        playSong();
    }
});

// 切换歌曲
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);

// 进度条更新
audio.addEventListener('timeupdate', updateProgress);

// 点击进度条
progressContainer.addEventListener('click', setProgress);

// 歌曲结束自动下一首
audio.addEventListener('ended', nextSong);